<template>
    <el-drawer title="设置" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
        <el-col :md="24" class="drawer-box">
            <el-col :md="24">
                <p>壁纸来源</p>
            </el-col>
            <el-col :md="24">
                <el-col :md="8" v-for="(dataSource, code, idx) in platformList" :key="idx">
                    <el-button type="success" size="mini" round plain @click.stop.prevent="changePlatform(code)" :disabled="(currentPlatform === code) ? true : false" :class="(currentPlatform === code) ? 'active' : ''">
                        {{dataSource.name}}
                    </el-button>
                </el-col>
            </el-col>
            <el-col :md="24">
                <el-divider></el-divider>
            </el-col>
            <el-col :md="24">
                <p>保存位置</p>
            </el-col>
            <el-col :md="24">
                <p>{{downloadPath}}</p>
                <el-button size="mini" @click.stop.prevent="changeDownloadPath">选择下载目录</el-button>
            </el-col>
        </el-col>
    </el-drawer>
</template>

<script>
    import Config from '../../utils/config.js';
    import { ipcRenderer } from 'electron'
    export default {
        name: "Drawer",
        data() {
            return {
                drawer: false,
                direction: 'rtl',
                platformList : this.dataSourceFactory.getPlatforms(),
                currentPlatform : this.dataSourceFactory.getCurrentPlatform(),
                downloadPath : ''
            };
        },
        methods: {
            handleClose(done) {
                done();
            },
            changeDownloadPath() {
                ipcRenderer.send('select-download-dir');
            },
            changePlatform (code) {
                this.currentPlatform = code;
                this.$emit('update:changePlatform', code);
            },
            ipc () {
                ipcRenderer.on('select-download-dir-reply', (event, arg) => {
                    if (!arg || !arg[0] || arg[0].length <= 0) {
                        return 0;
                    }
                    let Conf = new Config();
                    this.downloadPath = arg[0];
                    Conf.setDownloadPath(arg[0]);
                });
            }
        },
        mounted() {
            let Conf = new Config();
            this.downloadPath = Conf.getDownloadPath();
            this.ipc();
        }
    }
</script>

<style scoped>
    .drawer-box {
        text-align: left;
        padding: 15px;
    }
    .el-button--success.is-plain.active {
        background: #5daf34;
        border-color: #5daf34;
        color: #FFF;
        outline: 0;
    }
</style>
